/*
 * @Author: your name
 * @Date: 2022-03-31 14:41:49
 * @LastEditTime: 2022-04-06 20:11:37
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\advancedSearch.jsx
 */
import React, { useState } from 'react';
import './paymen.css'
import { Button, Input, Form, Space, Select, Row, Col, DatePicker } from 'antd';
const Advancedsearch = () => {
    const [searchForm] = Form.useForm()
    const { RangePicker } = DatePicker;
    const [componentSize, setComponentSize] = useState('default');
    const onFormLayoutChange = ({ size }) => {
        setComponentSize(size);
    };
    //立即搜索
    const immediateSearch = () => {
        console.log(searchForm.getFieldsValue());
    }
    return (
        <div className='container-midlle'>
            <Form
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 10,
                }}
                layout="horizontal"

                initialValues={{
                    size: componentSize,
                }}
                onValuesChange={onFormLayoutChange}
                size={componentSize}
                name="power-search"
                form={searchForm}
            >
                <Row>
                    <Col span={8}>
                        <Form.Item name='number' label="编号" extra>
                            <Input />
                        </Form.Item>
                        <Form.Item name='date' label="收支日期" extra>
                                <RangePicker />
                        </Form.Item>
                        <Form.Item name='manager-group' label="经办人" extra>
                            <Select>
                                <Select.Option value="1">
                                    <Input />
                                </Select.Option>
                                <Select.Option value="2" disabled>请选择</Select.Option>
                                <Select.Option value="超级管理员">超级管理员</Select.Option>
                                <Select.Option value="张三">张三</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name='client' label="客户名称" extra>
                            <Input />
                        </Form.Item>
                        <Form.Item name='remark' label="备注" extra>
                            <Input />
                        </Form.Item>
                        <Form.Item name='account-group' label="资金账户" extra>
                            <Select>
                                <Select.Option value="1" disabled>请选择</Select.Option>
                                <Select.Option value="默认账户">默认账户</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name='Inaddex-group' label="收入_支出" extra>
                            <Select>
                                <Select.Option value="1" disabled>请选择</Select.Option>
                                <Select.Option value="收入">收入</Select.Option>
                                <Select.Option value="支出">支出</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='salesman-group' label="业务员" extra>
                            <Select>
                                <Select.Option value="1">
                                    <Input />
                                </Select.Option>
                                <Select.Option value="2" disabled>请选择</Select.Option>
                                <Select.Option value="超级管理员">超级管理员</Select.Option>
                                <Select.Option value="张三">张三</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item name='audit-group' label="是否审核" extra>
                            <Select>
                                <Select.Option value="1" disabled>请选择</Select.Option>
                                <Select.Option value="已审核">已审核</Select.Option>
                                <Select.Option value="未审核">未审核</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Row justify='center'>
                <Col>
                    <Button type="primary" size='large' style={{ backgroundColor: '#6DC292' }} onClick={immediateSearch}>
                        立即搜索
                    </Button>
                    <Button type="primary" size='large' style={{ backgroundColor: '#737373' }}>
                        清空条件
                    </Button>
                    <Button type="primary" size='large'>
                        导出数据
                    </Button>
                </Col>
            </Row>
        </div>
    );
}

export default Advancedsearch;
